﻿dl.alerter {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 2px;
    background-color: #fff;
    -webkit-background-clip: content;
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    user-select: none;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

    dl.alerter > dt {
        width: 100%;
        height: 100%;
        cursor: move;
        height: 50px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: horizontal;
        border-radius: 2px 2px 0 0;
        border-bottom: 1px solid #F0F0F0;
        line-height: 50px;
        overflow: hidden;
        user-select: none;
    }

        dl.alerter > dt > img {
            height: 20px;
            margin: 10px;
        }

        dl.alerter > dt > i {
            height: 100%;
            margin-left: 20px;
            margin-right: 5px;
        }

        dl.alerter > dt > div.alerter-title {
            -webkit-box-flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
        }

        dl.alerter > dt > a {
            width: 20px;
            display: inline-block;
            text-decoration: none;
            color: #333;
            margin: 0 5px;
        }

            dl.alerter > dt > a:hover {
                color: #000000;
            }

            dl.alerter > dt > a.min {
            }

                dl.alerter > dt > a.min::before {
                    content: '\e250';
                }

            dl.alerter > dt > a.restore::before {
                content: '\e24e';
            }

            dl.alerter > dt > a.max::before {
                content: '\e24f';
            }

            dl.alerter > dt > a.close::before {
                content: '\e144';
            }

            dl.alerter > dt > a:last-child {
                margin-right: 20px;
            }

    dl.alerter > dd {
        width: 100%;
        -webkit-box-flex: 1;
        margin: 0px;
        position: relative;
    }
    dl.alerter > .resize {
        position: absolute;
        opacity:0;
        background:#FF6600;
    }
    dl.alerter > .resize-right {
        cursor: ew-resize;
        height: 100%;
        width: 3px;
        right: 0px;
        top: 0;
        z-index: 1;
    }
    dl.alerter > .resize-bottom {
        cursor: ns-resize;
        width: 100%;
        height: 3px;
        bottom: 0px;
        left: 0;
        z-index: 1;
    }
    dl.alerter > .resize-left {
        cursor:ew-resize;
        height: 100%;
        width: 3px;
        left: 0px;
        top: 0;
        z-index: 1;
    }
    dl.alerter > .resize-top {
        cursor: ns-resize;
        width: 100%;
        height: 3px;
        top: 0px;
        left: 0;
        z-index: 1;
    }

    dl.alerter > .resize-right-bottom {
        cursor: se-resize;
        right: 0px;
        bottom: 0px;
        width: 10px;
        height: 10px;
        z-index: 3;
    }
    dl.alerter > .resize-right-top {
        cursor: ne-resize;
        right: 0px;
        top: 0px;
        width: 10px;
        height: 10px;
        z-index: 3;
    }
    dl.alerter > .resize-left-bottom {
        cursor: ne-resize;
        left: 0px;
        bottom: 0px;
        width: 10px;
        height: 10px;
        z-index: 3;
    }
    dl.alerter > .resize-left-top {
        cursor: se-resize;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 10px;
        z-index: 3;
    }
.alerter-shade {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 99;
}

.alerter-temp {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 100px;
    top: 100px;
    border: 2px dotted #FF6600;
    z-index: 85100500;
    border-radius: 3px;
    background-color: rgba(255,255,255,.5);
}

.alerter-move {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 85100500;
}

.alerter-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 85100500;
}
/* 动画 */
.alerter-anim {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

@-webkit-keyframes alerter-bounceIn { /* 默认 */
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes alerter-bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.alerter-anim-00 {
    -webkit-animation-name: alerter-bounceIn;
    animation-name: alerter-bounceIn
}

@-webkit-keyframes alerter-zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes alerter-zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        -ms-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        -ms-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.alerter-anim-01 {
    -webkit-animation-name: layer-zoomInDown;
    animation-name: layer-zoomInDown
}

@-webkit-keyframes alerter-fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes alerter-fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.alerter-anim-02 {
    -webkit-animation-name: alerter-fadeInUpBig;
    animation-name: alerter-fadeInUpBig
}

@-webkit-keyframes alerter-zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(48px);
        transform: scale(.475) translateX(48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes alerter-zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        -ms-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(48px);
        -ms-transform: scale(.475) translateX(48px);
        transform: scale(.475) translateX(48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.alerter-anim-03 {
    -webkit-animation-name: alerter-zoomInLeft;
    animation-name: alerter-zoomInLeft
}

@-webkit-keyframes alerter-rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg)
    }
}

@keyframes alerter-rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        -ms-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        -ms-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg)
    }
}

.alerter-anim-04 {
    -webkit-animation-name: alerter-rollIn;
    animation-name: alerter-rollIn
}

@keyframes alerter-fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.alerter-anim-05 {
    -webkit-animation-name: alerter-fadeIn;
    animation-name: alerter-fadeIn
}

@-webkit-keyframes alerter-shake {
    0%,100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
}

@keyframes alerter-shake {
    0%,100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px)
    }
}

.alerter-anim-06 {
    -webkit-animation-name: alerter-shake;
    animation-name: alerter-shake
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
/* 关闭动画 */
@-webkit-keyframes alerter-bounceOut {
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    30% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes alerter-bounceOut {
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7);
    }

    30% {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }

    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.alerter-anim-close {
    -webkit-animation-name: alerter-bounceOut;
    animation-name: alerter-bounceOut;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
}
